import { MapboxDrawService } from '../../core/services/mapbox-draw.service';
import { MapService } from '../../core';
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import * as turf from '@turf/turf';
import {MapMeasure} from './measure';
@Component({
  selector: 'app-mapbox-measure',
  templateUrl: './mapbox-measure.component.html',
  styleUrls: ['./mapbox-measure.component.scss']
})
export class MapboxMeasureComponent implements OnInit {
  mapboxglmap = null;
  draw = null;
  startDraw = false; // 记录是否开始绘制
  drawCoorDinates = []; // 记录绘制坐标
  measureType: '' | 'length' | 'area' = '';
  pupup = null;
  reset = '001';
  // 订阅
  subscriptions = [];
  identifyState = false;
  @Output() clearMeasure = new EventEmitter<any>();
  @Output() identityPoint = new EventEmitter<any>();
  @Output() legendEmit = new EventEmitter<any>();
  mapMeasure: MapMeasure = null;
  constructor(
    private mapService: MapService, 
    private mapboxDrawService: MapboxDrawService
    ) { }
  data = [
    // {
    //   id: 'draw_line_string',
    //   title: '线'
    // },
    {
      id: 'full-ext',
      title: '全图',
      dimg: './assets/img/toolbar/maptool_full.png',
      simg: './assets/img/toolbar/maptool_full_select.png',
      active: false,
    },
    {
      id: 'draw_line_string',
      title: '测距',
      dimg: './assets/img/toolbar/maptool_dist.png',
      simg: './assets/img/toolbar/maptool_dist_select.png',
      active: false,
    },
    {
      id: 'draw_polygon',
      title: '测面',
      dimg: './assets/img/toolbar/btn_sps_plogon.png',
      simg: './assets/img/toolbar/btn_sps_plogon_select.png',
      active: false,
    },
    {
      id: 'identify',
      title: '',
      dimg: './assets/img/toolbar/maptool_search.png',
      simg: './assets/img/toolbar/maptool_search_select.png',
      active: true,
      lock: true
    },
    {
      id: 'delete',
      title: '删',
      dimg: './assets/img/toolbar/btn_sps_clear.png',
      simg: './assets/img/toolbar/btn_sps_clear_select.png',
      active: false,
    }

  ];
  ngOnInit() {
    this.mapService.init().then((mapboxglmap: any) => {
      this.mapboxglmap = mapboxglmap;
      if (mapboxglmap.isStyleLoaded()) {
        this.init();
      } else {
        mapboxglmap.on('load', () => {
          this.init();
        });
      }
    });
    this.subscriptions.push(
      postal.channel('IDENTIFY_CHANNEL').subscribe('close-identify', res => {
        // TODO: 关闭当前的标识按钮
        if (this.data) {
          this.data.forEach(element => {
            if (element.id === 'identify') {
              element.active = false;
              element.lock = false;
            }
          });
        }
        // 更换鼠标标识
        this.mapboxglmap.getCanvas().style.cursor = 'grab';
        this.identityPoint.emit(false);
        // 关闭i查询详情面板！
        postal.channel('DETAIL_PANEL_CHANNEL').publish('detail-panel', 'identify');
      })
    );
  }
  init() {
    this.mapMeasure = new MapMeasure(this.mapboxglmap);
    const e = { id: 'identify' };
    this.drawClick(e);
  }

  drawClick(e) {
    // this.draw.deleteAll();
    if (e.id !== 'identify') {
      // TODO:设置identify的lock为false
      this.data.forEach(element => {
        if (element.id === 'identify'){
          this.clearIdentify(element);
        }
      });
      postal.channel('DETAIL_PANEL_CHANNEL').publish('detail-panel', e.id);
    }
    switch (e.id) {
      case 'full-ext':
        let style = this.mapService.getMap().getStyle();
        this.mapService.getMap().flyTo({
          center: style.center,
          zoom: style.zoom,
          bearing: style.bearing || 0,
        });
        this.restCacheCoors();
        this.reset += 1;
        break;
      case 'delete':
        this.restCacheCoors();
        this.pupup ? this.pupup.remove() : null;
        this.mapMeasure && this.mapMeasure.clear();
        this.clearMeasure.emit(null);
        break;
      case 'draw_line_string':
        this.mapMeasure && this.mapMeasure.clear();
        this.mapMeasure && this.mapMeasure.measure('line');
        break;
      case 'draw_polygon':
        this.mapMeasure && this.mapMeasure.clear();
        this.mapMeasure && this.mapMeasure.measure('polygon');
        break;
      case 'identify':
        e.lock = !e.lock;
        e.lock ? e.active = true : e.active = false;
        if (e.lock) {
          this.mapboxglmap.getCanvas().style.cursor = 'pointer';
          this.identityPoint.emit(true);
        } else {
          postal.channel('DETAIL_PANEL_CHANNEL').publish('detail-panel', e.id);
          this.mapboxglmap.getCanvas().style.cursor = 'grab';
          this.identityPoint.emit(false);
        }
        break;
      default:
        this.startDraw = false;
        this.draw.deleteAll();
    }
    // document.querySelector('body').style.cursor = 'pointer';
  }


  // 将和identify联动的所有内容关闭掉！
  clearIdentify(element){
    element.active = false;
    element.lock = false;
    this.mapboxglmap.getCanvas().style.cursor = 'grab';
    this.identityPoint.emit(false);
  }

  getPointLatLn() {
    this.identifyState = !this.identifyState;
    this.identityPoint.emit(this.identifyState);
  }
  restCacheCoors() {
    this.startDraw = false;
    this.drawCoorDinates = [];
  }
  mouseenter(e) {
    if (e.id === 'identify') {
      return;
    }
    this.data.forEach(i => {
      if (i.id !== 'identify') { i.active = false; }

    });
    e.active = true;
  }
  mouseleave(e) {
    if (e.id === 'identify') {
      return;
    }
    e.active = false;
  }
  getLengedInfo(e) {
    this.legendEmit.emit(e);
  }
}
